<extend name='Public/demo' />
<block name='contents'>
    <!-- Modal -->
    <div class="modal fade" id="addPhotosModal" tabindex="-1" role="dialog" aria-labelledby="addPhotosModalLabel">
        <div class="modal-dialog" role="document" style="width:650px">
            <div class="modal-body">
                <div id="demo" class="demo"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-md-12">
            <button type="button" class="btn-addPhotos btn btn-success" data-toggle="modal" data-target="#addPhotosModal">添加照片</button>
            <hr>
        </div>
        <style>
            .photo {
                width: 100%;
                height: 200px;
                overflow: hidden;
                background-size: cover;
                transition: all 1s;
            }

            .photo:hover {
                transform: scale(1.05);
            }
        </style>
        <if condition="count($photosList) gt 0">
            <foreach name="photosList" item="value">
                <div class="col-sm-6 col-md-3" style="margin-bottom:30px;">
                    <div class="thumbnail" style="overflow:hidden;padding:0px;">
                        <div class="photo" style="background-image:url('__PUBLIC__{$value.photos_path}');">
                        </div>
                        <div class="caption">
                            <h5><b>{$value.photos_name}</b></h5>
                            <p{$value.photos_info}</p>
                                <p>
                                    <a href="#" class="btn btn-default" role="button">查看</a>
                                    <a href="#" class="btn btn-primary" role="button">删除</a>
                                </p>
                        </div>
                    </div>
                </div>
            </foreach>
            <else/>
            <div class="col-sm-12 col-md-12">
                没有更多照片了
            </div>
        </if>
    </div>

    <!-- 引用控制层插件样式 -->
    <link rel="stylesheet" href="__PUBLIC__/ImageUpload/control/css/zyUpload.css" type="text/css">
    <!-- 引用核心层插件 -->
    <script type="text/javascript" src="__PUBLIC__/ImageUpload/core/zyFile.js"></script>
    <!-- 引用控制层插件 -->
    <script type="text/javascript" src="__PUBLIC__/ImageUpload/control/js/zyUpload.js"></script>
    <script type="text/javascript">
        var albums_id = {$Think.get.id};
        $(function() {
            // 初始化插件
            $("#demo").zyUpload({
                width: "", // 宽度
                height: "", // 宽度
                itemWidth: "120px", // 文件项的宽度
                itemHeight: "100px", // 文件项的高度
                //url              :   "/upload/UploadAction",  // 上传文件的路径
                url: "{:U('Home/Image/imageadddo')}",
                multiple: true, // 是否可以多个文件上传
                dragDrop: true, // 是否可以拖动上传文件
                del: true, // 是否可以删除文件
                finishDel: false, // 是否在上传文件完成后删除预览
                /* 外部获得的回调接口 */
                onSelect: function(selectFiles, allFiles) { // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                    console.info("当前选择了以下文件：");
                    console.info(selectFiles);
                },
                onProgress: function(file, loaded, total) { // 正在上传的进度的回调方法
                    console.info("当前正在上传此文件：");
                    console.info(file.name);
                    console.info("进度等信息如下：");
                    console.info(loaded);
                    console.info(total);
                },
                onDelete: function(file, files) { // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                    console.info("当前删除了此文件：");
                    console.info(file.name);
                },
                onSuccess: function(file, response) { // 文件上传成功的回调方法
                    console.info("此文件上传成功：");
                    console.info(file.name);
                },
                onFailure: function(file, response) { // 文件上传失败的回调方法
                    console.info("此文件上传失败：");
                    console.info(file.name);
                },
                onComplete: function(response) { // 上传完成的回调方法
                    // console.info("文件上传完成");
                    // console.info(response);
                    $('#addPhotosModal').modal('hide');
                    window.location.reload();
                }
            });

        });
    </script>
</block>
